<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { userInformation } from "../userInformation"
import navBar from "../../../../src/components/layout/navBar.vue"

const props = defineProps<{}>()
const emit = defineEmits([])
const initData = reactive({} as any)
const {
    exit,
    back
} = userInformation(props, initData, emit)

const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('')
const show = ref(false);

const showNotify = () => {
    show.value = true;
    setTimeout(() => {
        show.value = false;
        exit()
    }, 3000);
};
const onSubmit = (values: any) => {
    console.log('submit', values);
    showNotify()
};
const validatorMessage = () =>
    newPassword.value !== confirmPassword.value ? '请确认与新密码一致' : ''


</script>
<template>
    <div>
           <navBar left="Y" right="N" title="修改密码"></navBar>

    </div>
    <div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                    v-model="oldPassword"
                    type="password"
                    required
                    name="旧密码"
                    label="旧密码"
                    placeholder="请输入旧密码"
                    :rules="[{ required: true, message: '请输入正确的旧密码' }]"
                />
                <van-field
                    v-model="newPassword"
                    type="password"
                    required
                    name="密码"
                    label="密码"
                    placeholder="请输入新密码"
                    :rules="[{ required: true, message: '请输入新密码' }]"
                />
                <van-field
                    v-model="confirmPassword"
                    type="password"
                    required
                    name="确认新密码"
                    label="确认新密码"
                    placeholder="请输入新密码"
                    :rules="[
                        { required: true, message: '请再次确认新密码' },
                        { validator: validatorMessage }
                    ]"
                />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">提交</van-button>
            </div>
        </van-form>
        <van-notify v-model:show="show" type="success">
            <van-icon name="bell" style="margin-right: 4px;" />
            <span>修改成功，请重新登录</span>
        </van-notify>
    </div>
</template>
<style scoped>
.navbar {
    background: url(../../../public/assets/projectPhotos/background.png);
}

:deep(.van-nav-bar__title) {
    color: white;
}
:deep(.van-nav-bar__text) {
    color: white;
}
:deep(.van-icon-arrow-left:before) {
    color: white;
}
:deep(.van-popup--top) {
    height: 6%;
}
</style>